<template>
    <div v-loading="loading" style="height:100%;">
        <Layout v-if="inSubApplication">
            <div id="subapp-viewport"></div>
        </Layout>
        <router-view v-if="isRouterAlive"/>
    </div>
</template>

<script>
import Vue from "vue";
import formatDate from "common/src/filters/date";
import microApps from './micro-app'
// import Layout from '@/views/layout'
import {Layout} from 'common'

Vue.filter("formatDate", formatDate);
export default {
    name: "App",
    components:{
        Layout
    },
    provide() {
        return {
            reload: this.reload
        };
    },
    data() {
        return {
            loading: false,
            isRouterAlive: true,
            inSubApplication:false
        };
    },
    mounted () {
        this.listenRouterChange()
        this.inSubApplicationFun(this.$route.path)
    },
    watch: {
        '$route'(newValue, oldValue) {
            this.inSubApplicationFun(newValue.path)
        }
    },
    methods: {
        inSubApplicationFun(path){
            this.inSubApplication = microApps.some((item)=>{
                return path.indexOf(item.activeRule) > -1
            })
        },
        listenRouterChange () {
            const _wr = function (type) {
                const orig = history[type]
                return function () {
                const rv = orig.apply(this, arguments)
                const e = new Event(type)
                e.arguments = arguments
                window.dispatchEvent(e)
                return rv
                }
            }
            history.pushState = _wr('pushState')

            // window.addEventListener('pushState', this.bindCurrent)
            // window.addEventListener('popstate', this.bindCurrent)

            // this.$once('hook:beforeDestroy', () => {
            //     window.removeEventListener('pushState', this.bindCurrent)
            //     window.removeEventListener('popstate', this.bindCurrent)
            // })
        },
        reload() {
            setTimeout(() => {
                // this.loading = true;
                this.isRouterAlive = false;
                this.$nextTick(() => {
                    //this.$router.replace("/workbench");
                    this.isRouterAlive = true;
                    this.loading = false;
                });
            }, 50)
        }
    }
};
</script>
